<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <link type="text/css" rel="stylesheet" href="./css/pubuliu.css">
</head>

<body>
<div id="body">
    <div class="body_box">
        <div class="body_box_pic">
            <img src="./img/0.jpg">
        </div>
    </div>
    <div class="body_box">
        <div class="body_box_pic">
            <img src="./img/1.jpg"/>
        </div>
    </div>
    <div class="body_box">
        <div class="body_box_pic">
            <img src="./img/2.jpg"/>
        </div>
    </div>
    <div class="body_box">
        <div class="body_box_pic">
            <img src="./img/3.jpg"/>
        </div>
    </div>
    <div class="body_box">
        <div class="body_box_pic">
            <img src="./img/4.jpg"/>
        </div>
    </div>
    <div class="body_box">
        <div class="body_box_pic">
            <img src="./img/5.jpg"/>
        </div>
    </div>
    <div class="body_box">
        <div class="body_box_pic">
            <img src="./img/6.jpg"/>
        </div>
    </div>
    <div class="body_box">
        <div class="body_box_pic">
            <img src="./img/7.jpg"/>
        </div>
    </div>
    <div class="body_box">
        <div class="body_box_pic">
            <img src="./img/8.jpg"/>
        </div>
    </div>
    <div class="body_box">
        <div class="body_box_pic">
            <img src="./img/9.jpg"/>
        </div>
    </div>
    <div class="body_box">
        <div class="body_box_pic">
            <img src="./img/10.jpg"/>
        </div>
    </div>
    <div class="body_box">
        <div class="body_box_pic">
            <img src="./img/11.jpg"/>
        </div>
    </div>
    <div class="body_box">
        <div class="body_box_pic">
            <img src="./img/12.jpg"/>
        </div>
    </div>
    <div class="body_box">
        <div class="body_box_pic">
            <img src="./img/13.jpg"/>
        </div>
    </div>
    <div class="body_box">
        <div class="body_box_pic">
            <img src="./img/14.jpg"/>
        </div>
    </div>
    <div class="body_box">
        <div class="body_box_pic">
            <img src="./img/15.jpg"/>
        </div>
    </div>
    <div class="body_box">
        <div class="body_box_pic">
            <img src="./img/16.jpg"/>
        </div>
    </div>
    <div class="body_box">
        <div class="body_box_pic">
            <img src="./img/17.jpg"/>
        </div>
    </div>
</div>
<script>
    window.onload = function () {
        var dataInt = {'data': [{'src': '1.jpg'}, {'src': '2.jpg'}, {'src': '3.jpg'}, {'src': '4.jpg'}]};
        var body = document.getElementById('body');
        //
        var body_box = document.getElementsByClassName('body_box');
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动条已滚动的高度
        var documentH = document.documentElement.clientHeight;//页面高度
        var timer = null;
        waterfall();
        //
        timer = setInterval(function () {
            var addheiht = body_box[body_box.length - 1].offsetTop + Math.floor(body_box[body_box.length - 1].offsetHeight / 2);//未加载时最后一张图高度的一半
            if (addheiht < scrollTop + documentH) {
                for (var i = 0; i < dataInt.data.length; i++) {
                    var new_body_box = document.createElement('div');
                    new_body_box.className = 'body_box';
                    body.appendChild(new_body_box);
                    var new_body_box_pic = document.createElement('div');
                    new_body_box_pic.className = 'body_box_pic';
                    new_body_box.appendChild(new_body_box_pic);
                    var new_img = document.createElement('img');
                    new_img.src = './img/' + dataInt.data[i].src;
                    new_body_box_pic.appendChild(new_img);
                }
                waterfall();
            }
            else {
                clearInterval(timer)
            }
        }, 10);
        //不同分辨率下默认的图片高度不够，会产生没有滚动条的情况导致无法使用鼠标滚动事件；加定时器如果默认图片高度不能撑起滚动条则自动增加图片节点

        window.onscroll = function () {
            //if (addstar) {
            for (var i = 0; i < dataInt.data.length; i++) {
                var new_body_box = document.createElement('div');
                new_body_box.className = 'body_box';
                body.appendChild(new_body_box);
                var new_body_box_pic = document.createElement('div');
                new_body_box_pic.className = 'body_box_pic';
                new_body_box.appendChild(new_body_box_pic);
                var new_img = document.createElement('img');
                new_img.src = './img/' + dataInt.data[i].src;
                new_body_box_pic.appendChild(new_img);
            }
            waterfall();
            //}
        };//添加滚动条事件

        function waterfall() {
            var body_box = document.getElementsByClassName('body_box');
            var body_box_width = body_box[0].offsetWidth;//获取图片父div的宽度
            var body_width_number = Math.floor(document.documentElement.clientWidth / body_box_width);//屏幕宽度/单个图片容器宽度;获取当前页面宽度可显示的列数
            body.style.cssText = 'width:' + body_box_width * body_width_number + 'px;margin:0 auto;';//根据浏览器可视区宽度动态显示列数及父级div整体居中
            var body_box_arry = [];
            for (var i = 0; i < body_box.length; i++) {
                if (i < body_width_number) {
                    body_box_arry.push(body_box[i].offsetHeight);//将更新后最低列高的高度更新到数组内
                }
                else {
                    var min_body_box_arry = Math.min.apply(null, body_box_arry);//获取高度数组中最矮的参数
                    var index_body_box_arry = getarry(body_box_arry, min_body_box_arry);//获取数组中最矮的参数的索引
                    body_box[i].style.position = 'absolute';//设置新增box绝对定位
                    body_box[i].style.top = min_body_box_arry + 'px';//设置新增top
                    body_box[i].style.left = body_box[index_body_box_arry].offsetLeft + 'px';//设置新增offsetLeft
                    body_box_arry[index_body_box_arry] = body_box_arry[index_body_box_arry] + body_box[i].offsetHeight;//更新数组最低项的高度
                }
            }
        }//设置每次新增div的样式及定位

        function getarry(obj_arry, numb) {
            for (var i in obj_arry) {
                if (obj_arry[i] === numb) {
                    return i;
                }
            }
        }
    };


</script>
</body>

</html>